<template>
  <div class="warp">
    <div class="warp-content">
      <div class="card">
        <div class="card-top">
          <div class="card-top-title flex flexC">
            <slot></slot>
            <div class="card-top-title-text">
              <div class="flex flexC">
                <div>
                  <span>跟团号:</span
                  ><span class="cF55726 p-l-10">{{ options?.join_no }}</span>
                </div>
              </div>
              <div class="card-date flex">
                <div>{{ options?.create_time }}</div>
              </div>
            </div>
            <div class="status">
              {{
                changeOrderContentStatus(options?.status_type, options?.status)
              }}
            </div>
          </div>
          <nut-divider style="color: #eeeeee" />
          <div class="card-info">
            <div class="card-info-top flex flexBetween">
              <div class="flex flexC f1">
                <nut-avatar
                  size="50"
                  :icon="
                    options.avatar
                      ? options.avatar
                      : 'https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png'
                  "
                ></nut-avatar>
                <div class="name">{{ options?.nickname }}</div>
              </div>
              <div class="flex flexC">
                <div class="txt ellipsis">{{ options?.title }}</div>
                <nut-icon name="rect-right" style="color: #999"></nut-icon>
              </div>
            </div>
            <div
              class="content flex flexBetween flexC"
              v-for="(child, index) in options?.list"
              :key="index"
            >
              <div class="flex flexC">
                <nut-image
                  radius="10"
                  class="nutImg"
                  :src="
                    child.image
                      ? commonStore.img_domain + child.image
                      : 'https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png'
                  "
                  showError
                >
                  <template #error>
                    <nut-image
                      src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
                    /> </template
                ></nut-image>
                <div class="info">
                  <div class="info-title ellipsis">{{ child.goods_name }}</div>
                  <div class="info-tips">规格：{{ child.spec }}</div>
                </div>
              </div>
              <div class="money">
                <div class="money-box">
                  <span class="m-icon">¥</span><span>{{ child.money }}</span>
                </div>
                <div class="info-num">共{{ child.quantity }}件</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";
import { changeOrderContentStatus } from "@/utils/pub-use";
import useCommonStore from "@/store/common";
const commonStore = useCommonStore();
const props = defineProps<{ options: any }>();
</script>
<style scoped lang="scss">
.warp {
  height: 100%;

  .warp-content {
    .title {
      font-size: 28px;
      color: #000000;
      padding-bottom: 23px;
    }
  }
}

.card {
  background: #fff;
  width: auto;
  margin-bottom: 20px;
  border-radius: 20px;
  padding: 25px 20px;
  :deep(.nut-icon__img) {
    object-fit: cover;
  }
  .chose {
    width: 36px;
    height: 36px;
    margin-right: 18px;
  }
  .card-top-title-text {
    font-weight: 500;
    font-size: 32px;
  }

  .cF55726 {
    color: #f55726;
  }

  .p-l-10 {
    padding-left: 10px;
  }

  .status {
    color: #26acf5;
    font-size: 28px;
    margin-left: auto;
  }

  .card-date {
    color: #999;
    font-size: 22px;
  }
  .card-info {
    .name {
      font-size: 28px;
      color: #000;
      font-weight: 500;
      padding-left: 10px;
    }
    .txt {
      font-size: 28px;
      color: #000;
      max-width: 226px;
    }
    .w140 {
      width: 226px;
    }
    .content {
      padding-top: 18px;
      .img-item-title {
        color: #000000;
        font-size: 26px;
        text-align: center;
      }
      .img-item-num {
        color: #999999;
        font-size: 24px;
        text-align: center;
      }
    }
    .info {
      width: 332px;
      font-size: 28px;
      padding-left: 20px;
      .info-title {
        font-weight: 500;
        color: #000000;
      }
      .info-tips {
        font-size: 24px;
        font-weight: 400;
        color: #999999;
      }
    }
    .nutImg {
      display: block;
      width: 120px;
      height: 120px;
      border-radius: 20px;
    }

    .info-num {
      font-size: 22px;
      font-weight: 400;
      color: #999999;
      text-align: right;
    }
    .t-a-c {
      text-align: center;
    }
    .money {
      font-size: 28px;
      color: #000;
      font-weight: bold;
      text-align: center;
      .m-icon {
        font-size: 20px;
        padding-right: 10px;
      }
    }
    .img-item {
      margin-right: 20px;
    }
  }
}
</style>
